<!DOCTYPE html>
<html lang="en" style="height:100%">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>收到的评论和@</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css" />
    <link rel="stylesheet" type="text/css" href="../../css/vant.css" />
    <!-- <link rel="stylesheet" href="../../css/BarlowCondensed-Bold.woff.ttf" /> -->
    <!-- <link rel="stylesheet" href="../../css/sqc.css"> -->
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        input{

            outline:none;
        }
        .van-field__body{
            border: 1px solid #F5F5F5;
        }
    </style>
</head>

<body style="background: #f7f4f2;">
<div id="blank" class="header" v-cloak style="border-bottom:1px solid #f7f4f2;">
    <div v-back.tapmode class="back"></div>
    <div class="title">收到的评论和@</div>
</div>
<div id="app"  v-cloak style="padding-top:60px;">
    <div class="blacklist-people notice-list" style="background-color: #fff;">
        <ul>
            <li style="height: auto;position: relative" v-for="(list,index) in comment_list">
                <div class="notice_li" v-show="list.to_id == 0">
                    <div class="blacklist-head-notice no-pric" style="border-radius: 50%;top: 35px;">
                        <img :src="list.from_avatar" style="border-radius: 50%">
                    </div>
                    <div class="blacklist-head-datas">
                        <div class="blacklist-title" style="font-size: 15px;margin-bottom: 2px;">
                            <span style="width: 18%;display:inline-block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{list.from_nickname}}</span>
                            <span style="display:inline-block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{list.to_id == 0 ? '评论了我的动态' : '回复了我的评论'}}</span>
                        </div>
                        <div class="blacklist-title" style="font-size: 12px;color: #999;width: 70%;">{{list.from_content}}</div>
                        <div class="recovery-img">
                            <img style="width: 100%;height: 100%;border-radius: 6px" :src="list.cover" />
                        </div>
                        <div class="comment-datas-list">
                            <div style="float: left">{{list.create_time| time}}</div>
                            <div class="xihuan">
                                <span>{{list.praise_number}}</span>
                                <img v-show="list.praise_flag == 0" v-src="'../../image/huise-xin.png'" v-myclick="[index,takeaction]">
                                <img v-show="list.praise_flag == 1" v-src="'../../image/hongse-xin.png'" v-myclick="[index,takeaction]">
                            </div>
                            <div class="xihuan" style="margin-right: 28px"  v-myclick="[list.comment_id,to_comment]" v-show="list.to_id == 0">
                                <span>回复</span>
                                <img v-src="'../../image/xin-xiaoxi.png'">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="notice_li" v-show="list.to_id != 0">
                    <div class="notice_li_bottom" v-show="onself_member_id == list.from_id">
                        <div class="blacklist-head-notice no-pric" style="border-radius: 50%;top: 35px;">
                            <img :src="list.to_avatar" style="border-radius: 50%">
                        </div>
                        <div class="blacklist-head-datas">
                            <div class="blacklist-title" style="font-size: 15px;margin-bottom: 2px;">
                                <span style="width: 18%;display:inline-block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{list.to_nickname}}</span>
                                <span style="display:inline-block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">回复了我的评论</span>
                            </div>
                            <div class="blacklist-title" style="font-size: 12px;color: #999;width: 70%;">{{list.to_content}}</div>
                            <div class="recovery-img">
                                <img style="width: 100%;height: 100%;border-radius: 6px" :src="list.cover" />
                            </div>
                            <div class="replay-comment-title" style="margin-top: 30px" v-show="list.to_id != 0">
                                我的评论:{{list.from_content}}
                            </div>
                            <div class="comment-datas-list">
                                <div style="float: left">{{list.create_time| time}}</div>
                                <div class="xihuan">
                                    <span>{{list.praise_number}}</span>
                                    <img v-show="list.praise_flag == 0" v-src="'../../image/huise-xin.png'" v-myclick="[index,takeaction]">
                                    <img v-show="list.praise_flag == 1" v-src="'../../image/hongse-xin.png'" v-myclick="[index,takeaction]">
                                </div>
                                <div class="xihuan" style="margin-right: 28px"  v-myclick="[list.comment_id,to_comment]" v-show="list.to_id == 0">
                                    <span>回复</span>
                                    <img v-src="'../../image/xin-xiaoxi.png'">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="notice_li_bottom" v-show="onself_member_id == list.to_id">
                        <div class="blacklist-head-notice no-pric" style="border-radius: 50%;top: 35px;">
                            <img :src="list.from_avatar" style="border-radius: 50%">
                        </div>
                        <div class="blacklist-head-datas">
                            <div class="blacklist-title" style="font-size: 15px;margin-bottom: 2px;">
                                <span style="width: 18%;display:inline-block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{list.from_nickname}}</span>
                                <span style="display:inline-block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{list.return_flag == 1 ? '评论了我的动态' : '回复了我的评论'}}</span>
                            </div>
                            <div class="blacklist-title" style="font-size: 12px;color: #999;width: 70%;">{{list.from_content}}</div>
                            <div class="recovery-img">
                                <img style="width: 100%;height: 100%;border-radius: 6px" :src="list.cover" />
                            </div>
                            <div class="replay-comment-title" style="margin-top: 30px" v-show="list.to_id != 0">
                                {{list.return_flag == 1 ? '我的回复' : '我的评论'}}:{{list.to_content}}
                            </div>
                            <div class="comment-datas-list">
                                <div style="float: left">{{list.create_time| time}}</div>
                                <div class="xihuan">
                                    <span>{{list.praise_number}}</span>
                                    <img v-show="list.praise_flag == 0" v-src="'../../image/huise-xin.png'" v-myclick="[index,takeaction]">
                                    <img v-show="list.praise_flag == 1" v-src="'../../image/hongse-xin.png'" v-myclick="[index,takeaction]">
                                </div>
                                <div class="xihuan" style="margin-right: 28px"  v-myclick="[list.comment_id,to_comment]" v-show="list.to_id == 0">
                                    <span>回复</span>
                                    <img v-src="'../../image/xin-xiaoxi.png'">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div  v-show="comment_list == ''" style="text-align:center;margin-top:50px;background-color: #f7f4f2">
        <img src="../../image/big/huifu-pinglun.png" style="margin:0 auto;width:25%">
        <div style="margin:0 auto;color:#999999;text-align:center;padding-top:20px;font-size:12px">善意的言辞容易收到更多的评论</div>
    </div>
    <van-popup
            v-model="show1"
            closeable
            position="bottom"
            :style="{ height: '20%' }"
    />
    <div style="margin-top:40px;">
        <van-cell-group>
            <van-field
                    v-model="mycomment"
                    center
                    clearable
                    placeholder="请输入您想说的话"
            >
                <van-button slot="button" size="small" type="primary" v-myclick="send_comment">发送</van-button>
            </van-field>
        </van-cell-group>
        </van-popup>
    </div>
</div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script src="../../script/components.js"></script>
<script type="text/javascript" src="../../script/jquery.js"></script>
<script type="text/javascript" src="../../script/vant.min.js"></script>
<script>
    var vm,
        wx,
        comment_list,
    apiready = function () {
        setBSImg();
        new Vue({
            el: '#blank'
        })
        wx = api.require('wx');
        var data = {
            member_id:getPrefs('member_id'),
            page_no:1,
            page_size:20,
        };
        var callback = function (ret) {
            comment_list = ret.content;
            console.log(JSON.stringify(comment_list))
            initApp();
        };
        pinet.post(APIURL+'/app/Notices/commentList', data, callback);
        api.parseTapmode();
        addListeners();
    };

    function initApp() {
        // var isBigImg = Vue.BSImg == 'big';
        vm = new Vue({
            el: '#app',
            data: {
                mycomment:'',
                show1:false,
                comment_list:comment_list,
                index_state:1,
                onself_member_id:getPrefs('member_id'),
            },
            computed: {

            },
            methods: {
                send_comment:function(){
                    var data = {
                        from_id: getPrefs('member_id'),
                        comment_id:this.comment_id,
                        from_content:this.mycomment,
                    };
                    console.log(this.comment_id)
                    var callback = function (ret) {
                        api.toast({
                            msg: '评论成功',
                            duration: 2000,
                            location: 'middle'
                        });
                        vm.reload();
                        vm.show1 = false;
                    };
                    pinet.post(APIURL+'/app/Notices/commentReply', data, callback);
                },
                takeaction:function(index){
                    comment_id = this.comment_list[index].comment_id;
                    var data = {
                        member_id: getPrefs('member_id'),
                        comment_id: comment_id,
                    };

                    var callback = function (ret) {
                        api.toast({
                            msg: ret.message,
                            duration: 2000,
                            location: 'middle'
                        });
                        vm.comment_list[index].praise_flag =vm.comment_list[index].praise_flag == 0?1:0;
                        var praise_number = vm.comment_list[index].praise_number;
                        vm.comment_list[index].praise_number =vm.comment_list[index].praise_flag == 0?parseInt(praise_number)-1:parseInt(praise_number)+1;
                    };
                    pinet.post(APIURL+'/app/comment/commentPraiseSet', data, callback);
                },
                to_comment:function (value) {
                    console.log(value)
                    this.show1 = true;
                    this.comment_id = value;
                },
                reload:function () {
                    var data = {
                        member_id:getPrefs('member_id'),
                        page_no:1,
                        page_size:20,
                    };
                    var callback = function (ret) {
                        vm.comment_list = ret.content;
                        console.log(JSON.stringify(vm.comment_list))
                    };
                    pinet.post(APIURL+'/app/Notices/commentList', data, callback);
                },
            },
            watch: {

            },
        })
    }

    function addListeners() {

        api.addEventListener({
            name: 'viewappear'
        }, function () {
        });

        api.addEventListener({
            name: 'viewdisappear'
        }, function () {
        });

        api.addEventListener({
            name: 'keyback'
        }, function () {
            console.log('ddddd');
            api.closeWin();
        });
        api.addEventListener({
            name: 'reload'
        }, function () {
            window.location.reload();
        });
    }
</script>

</html>
